<template>
    <div class="wiv-dialog">
        <div class="wiv-dialog-body">
            <div class="dialog-map">
                <sub-map-line :line="aDetailForm"></sub-map-line>
            </div>
            <div class="dialog-form">
                <div class="dialog-form-item">
                    <el-form ref="formDialog"
                             label-width="7em"
                             v-model="aDetailForm"
                             v-for="(oItem,nIdx) in aDetailForm"
                             :key="nIdx">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="时 间：">
                                    <el-input :value="oItem.monitortime"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="监控点名称：">
                                    <el-input :value="oItem.tdname"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="抓拍照片：">
                                    <img :src="oItem.snappictures"
                                         class="form-image">
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { URLS_SY } from '@/urls.js';
    import SubMapLine from './map-line.vue'
    export default {
        components: {
            SubMapLine
        },
        data() {
            return {
                aDetailForm: [],//车辆轨迹列表
            };
        },
        mounted() {
            this.fGetCGj(); //获取车辆轨迹
        },
        methods: {
            fGetCGj() { //获取车辆轨迹
                this.$WIV.fRequest({
                    url: URLS_SY.d_getClGj
                }).then(({ data: oData }) => {
                    this.aDetailForm = oData;
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .wiv-dialog-body {
        display: flex;
    }
    .dialog-map {
        width: 734px;
        height: 689px;
        background: #ccc;
    }
    .dialog-form {
        height: 706px;
        width: 290px;
        overflow-y: auto;
    }
    .dialog-form-item {
        display: flex;
        flex-direction: column;
    }
    /deep/.el-form {
        width: 268px;
        height: 210px;
        margin-bottom: 33px;
    }
    /deep/.el-col {
        height: 38px;
    }
    /deep/.el-form-item__label {
        padding-right: 0px;
        color: #000000;
    }
    /deep/.el-input {
        width: 179px;
    }
    .form-image {
        width: 179px;
        height: 134px;
    }
</style>